<template>
  <div v-if="orderDetails">
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240); background: #fff"
      :title="`订单号：${orderDetails.order_no}`"
      :breadcrumb="{ props: { routes: isOffline ? routes2 : routes } }"
      v-if="orderDetails"
    >
      <template slot="extra" v-if="!yinbao">
        <template v-if="orderDetails.md_id > 0">
          <template v-if="orderDetails.is_trans == 1">
            <a-dropdown>
              <a-menu slot="overlay">
                <a-menu-item key="1" @click="isShowPrintModal = true">打印订单</a-menu-item>
                <a-menu-item key="2" @click="orderPrint">打印小票 </a-menu-item>
              </a-menu>
              <a-button style="margin-left: 8px"> <a-icon type="printer" />打印 <a-icon type="down" /> </a-button>
            </a-dropdown>
            <a-button
              key="4"
              @click="isShowExpressModal = true"
              v-if="(orderDetails.trade_status == 2 || orderDetails.trade_status == 3) && orderDetails.express_no"
            >
              物流
            </a-button>
            <!-- <a-button key="3" @click="orderRemark()"> 备注 </a-button> -->
            <a-button key="3" @click="orderWords()"> 留言 </a-button>
            <!-- <a-button key="2"> 修改订单 </a-button> -->
            <!-- <a-button key="1"> 取消配货 </a-button> -->
            <a-button
              key="4"
              @click="isShowSendModal = true"
              v-if="
                (orderDetails.trade_status == 0 || (orderDetails.trade_status == -1 && orderDetails.pay_type == 2)) &&
                orderDetails.is_delete == 0 &&
                !orderDetails.delivery_id
              "
            >
              确定发货
            </a-button>
            <a-popconfirm
              v-if="orderDetails.is_delete == 0 && orderDetails.trade_stauts != 1"
              placement="left"
              @confirm="cancel(1, 1)"
            >
              <template slot="title">
                <p>确认取消该订单吗？</p>
                <a-input v-model="reason" placeholder="请输入取消原因" />
              </template>
              <a-button key="5" v-if="orderDetails.trade_status < 1"> 取消订单 </a-button>
            </a-popconfirm>
          </template>
        </template>
        <template v-else>
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="isShowPrintModal = true">打印订单</a-menu-item>
              <a-menu-item key="2" @click="orderPrint">打印小票 </a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px"> <a-icon type="printer" />打印 <a-icon type="down" /> </a-button>
          </a-dropdown>
          <a-button
            key="4"
            @click="isShowExpressModal = true"
            v-if="(orderDetails.trade_status == 2 || orderDetails.trade_status == 3) && orderDetails.express_no"
          >
            物流
          </a-button>
          <!-- <a-button key="3" @click="orderRemark()"> 备注 </a-button> -->
          <a-button key="3" @click="orderWords()"> 留言 </a-button>
          <!-- <a-button key="2"> 修改订单 </a-button> -->
          <!-- <a-button key="1"> 取消配货 </a-button> -->
          <a-button
            key="4"
            @click="isShowSendModal = true"
            v-if="
              (orderDetails.trade_status == 0 || (orderDetails.trade_status == -1 && orderDetails.pay_type == 2)) &&
              !orderDetails.delivery_id
            "
          >
            确定发货
          </a-button>
          <a-popconfirm
            v-if="orderDetails.is_delete == 0 && orderDetails.trade_stauts != 1"
            placement="left"
            @confirm="cancel(1, 1)"
          >
            <template slot="title">
              <p>确认取消该订单吗？</p>
              <a-input v-model="reason" placeholder="请输入取消原因" />
            </template>
            <a-button key="5" v-if="orderDetails.trade_status < 1"> 取消订单 </a-button>
          </a-popconfirm>
        </template>
      </template>
      <div class="content">
        <div class="main">
          <a-descriptions size="small" :column="2">
            <a-descriptions-item label="买家"> {{ orderDetails.nickname || orderDetails.name }} </a-descriptions-item>
            <a-descriptions-item label="运费"> {{ orderDetails.express_price }}元 </a-descriptions-item>
            <a-descriptions-item label="下单时间"> {{ orderDetails.created_at }} </a-descriptions-item>
            <a-descriptions-item label="随机立减"> {{ orderDetails.rand_discount }}元 </a-descriptions-item>
            <a-descriptions-item label="实付金额"> {{ orderDetails.pay_price }}元 </a-descriptions-item>
            <a-descriptions-item label="积分抵扣" v-if="orderDetails.order_type == 7">
              {{ orderDetails.integral_price }}
            </a-descriptions-item>
            <a-descriptions-item label="支付方式"
              >{{
                orderDetails.pay_type == 1
                  ? '微信支付'
                  : orderDetails.pay_type == 2
                  ? '货到付款'
                  : orderDetails.pay_type == 3
                  ? '余额支付'
                  : orderDetails.pay_type == 4
                  ? '支付宝支付'
                  : orderDetails.pay_type == 11
                  ? '线下支付'
                  : '未支付'
              }}
            </a-descriptions-item>
            <a-descriptions-item label="赠送积分" v-if="orderDetails.integral && orderDetails.integral.forehead == 1">
              {{ orderDetails.integral.forehead_integral }}
            </a-descriptions-item>
            <!-- <a-descriptions-item label="商家备注"> {{ orderDetails.seller_comments }} </a-descriptions-item> -->
            <a-descriptions-item
              v-if="orderDetails.is_pay == 1 && orderDetails.is_combine_pay > 0 && orderDetails.combine_money > 0"
              label="组合付"
            >
              余额抵扣{{ orderDetails.combine_money }}元
            </a-descriptions-item>
            <a-descriptions-item
              v-if="orderDetails.is_pay == 1 && orderDetails.coupon_sub_price > 0"
              label="优惠券优惠"
            >
              {{ orderDetails.coupon_sub_price }}元
            </a-descriptions-item>
            <a-descriptions-item
              v-if="orderDetails.integral && orderDetails.integral.forehead > 0"
              label="商城积分抵扣"
            >
              {{ orderDetails.integral.forehead_integral }}积分抵扣{{ orderDetails.integral.forehead }}元
            </a-descriptions-item>
            <!-- <a-descriptions-item label="商家留言">
              {{ orderDetails.words }}
              <span style="color: red">商家留言将展示在客户端，买家可以看到，备注将不展示</span></a-descriptions-item
            > -->
            <a-descriptions-item label="下单门店">
              {{ orderDetails.md_id > 0 ? orderDetails.md_info.name : '-' }}
            </a-descriptions-item>

            <a-descriptions-item label="联盟券抵扣金额" v-if="orderDetails.take_price">
              {{ orderDetails.take_price }}元
            </a-descriptions-item>

            <a-descriptions-item label="发票税额" v-if="orderDetails.tax_price">
              {{ orderDetails.tax_price }}元
            </a-descriptions-item>
          </a-descriptions>
        </div>
        <div class="extra">
          <div
            :style="{
              display: 'flex',
              width: 'max-content',
              justifyContent: 'flex-end',
            }"
          >
            <!-- <a-statistic
              title="状态"
              value="已发货"
              :style="{
                marginRight: '32px',
              }"
            /> -->
            <a-statistic title="订单金额" prefix="￥" :value="orderDetails.total_price" />
          </div>
        </div>
      </div>
    </a-page-header>
    <div style="padding: 20px">
      <a-card :bordered="false" title="订单状态">
        <a-steps v-if="$route.query.order_type != 6" :current="orderStep">
          <a-popover slot="progressDot" slot-scope="{ index, status, prefixCls }">
            <template slot="content">
              <span>step {{ index }} status: {{ status }}</span>
            </template>
            <span :class="`${prefixCls}-icon-dot`" />
          </a-popover>
          <a-step
            :title="
              orderDetails.trade_status == 1
                ? '已取消'
                : orderStep > 0 && (orderDetails.pay_type != 2 || orderDetails.is_pay == 1)
                ? '已支付'
                : '未支付'
            "
          >
            <template slot="description">
              <template v-if="orderStep > 0 && (orderDetails.pay_type != 2 || orderDetails.is_pay == 1)">
                {{ orderDetails.pay_time | timeFormat }}
              </template>
              <template v-else> </template>
            </template>
          </a-step>

          <template
            v-if="parseInt(orderDetails.order_type) === 1 && [0, 2].includes(parseInt(orderDetails.trade_status))"
          >
            <a-step title="待使用">
              <template slot="description">
                <template v-if="orderStep > 1">
                  {{ orderDetails.send_time | timeFormat }}
                </template>
              </template>
            </a-step>
          </template>
          <template v-else>
            <a-step :title="orderStep > 1 ? '已发货' : '待发货'">
              <template slot="description">
                <template v-if="orderStep > 1">
                  {{ orderDetails.send_time | timeFormat }}
                </template>
              </template>
            </a-step>
            <a-step :title="orderStep > 2 ? '已收货' : '待收货'">
              <template slot="description">
                <template v-if="orderStep > 2">
                  {{ orderDetails.confirm_time | timeFormat }}
                </template>
              </template>
            </a-step>
          </template>

          <a-step title="已完成" />
        </a-steps>
        <a-steps v-else :current="statusCurrent">
          <a-popover slot="progressDot" slot-scope="{ index, status, prefixCls }">
            <!-- <template slot="content">
              <span>step {{ index }} status: {{ status }}</span>
            </template> -->
            <span :class="`${prefixCls}-icon-dot`" />
          </a-popover>
          <a-step v-for="(content, key) in statusList" :key="key" :title="content"> </a-step>
        </a-steps>
      </a-card>

      <a-card
        :bordered="false"
        style="margin-top: 10px"
        title="同城配送信息"
        v-if="orderDetails && orderDetails.delivery_type == 2"
      >
        <a-row>
          <a-col span="8"> 配送方式：{{ orderDetails.delivery_info.delivery_type }} </a-col>
          <a-col span="8"> 配送单号：{{ orderDetails.delivery_info.waybill_id }} </a-col>
          <a-col span="8"> 配送状态：{{ orderDetails.delivery_info.status }} </a-col>
        </a-row>
        <a-row
          style="margin-top: 20px"
          v-if="orderDetails.delivery_info.rider_name && orderDetails.delivery_info.rider_mobile"
        >
          <a-col span="8"> 骑手姓名：{{ orderDetails.delivery_info.rider_name }} </a-col>
          <a-col span="8"> 骑手电话：{{ orderDetails.delivery_info.rider_mobile }} </a-col>
        </a-row>
        <a-row style="margin-top: 20px">
          <a-col span="8"> 配送费用：{{ orderDetails.delivery_info.fee }} 元</a-col>
          <a-col span="8" v-if="orderDetails.delivery_info.reason">
            取消原因：{{ orderDetails.delivery_info.reason }}
          </a-col>
          <a-col span="8" v-if="orderDetails.delivery_info.duct_fee">
            取消费用：{{ orderDetails.delivery_info.duct_fee }} 元</a-col
          >
        </a-row>
      </a-card>

      <a-card v-if="orderDetails" :bordered="false" style="margin-top: 10px" title="买家及收货信息">
        <template v-if="!yinbao">
          <a-button
            slot="extra"
            v-if="orderDetails.md_id == 0 || orderDetails.is_trans == 1"
            @click="tableOperate('order_address')"
            >修改信息</a-button
          >
        </template>
        <template>
          <a-button
            slot="extra"
            v-if="orderDetails.is_offline == 1 && orderDetails.trade_status == 0"
            @click="tableOperate('update_shop')"
            >修改自提信息</a-button
          >
        </template>

        <a-descriptions size="small" :column="3" v-if="orderDetails.order_type != 0">
          <a-descriptions-item label="预约时间">
            {{ orderDetails.book.date }}
          </a-descriptions-item>
          <a-descriptions-item :label="form.key" v-for="(form, index) in orderDetails.form" :key="index">
            {{ form.value }}
          </a-descriptions-item>
        </a-descriptions>

        <a-descriptions size="small" :column="3">
          <a-descriptions-item label="收货人"> {{ orderDetails.name }} </a-descriptions-item>
          <a-descriptions-item label="配送方式">
            {{ orderDetails.diy_express_name }}
          </a-descriptions-item>
          <a-descriptions-item label="买家备注"> {{ orderDetails.remark || '-' }} </a-descriptions-item>
          <a-descriptions-item label="联系方式"> {{ orderDetails.mobile }} </a-descriptions-item>
          <a-descriptions-item label="收货地址"> {{ orderDetails.address }} </a-descriptions-item>
        </a-descriptions>
        <!-- <p>用户姓名：{{ orderDetails.nickname }}</p> -->
      </a-card>

      <a-card
        v-if="orderDetails && orderDetails.order_type === '1'"
        :bordered="false"
        style="margin-top: 10px"
        title="入住人信息"
      >
        <div class="list-table">
          <div class="tit">表单信息</div>
          <ul>
            <li v-for="(item, i) of orderDetails.book_info" :key="i">
              <h4>房间：{{ i + 1 }}</h4>
              <div class="con">
                <div><em>姓名：</em>{{ item.name }}</div>
                <div><em>手机：</em>{{ item.mobile }}</div>
                <div><em>身份证：</em>{{ item.idCard }}</div>
              </div>
            </li>
          </ul>
        </div>
      </a-card>

      <!-- <a-card
        v-if="orderDetails && orderDetails.pay_type == 11"
        :bordered="false"
        style="margin-top: 10px"
        title="线下转账"
      >
        <div class="list-table" v-if="orderDetails.payOffLine">
          <ul>
            <li>
              <div class="con">
                <div><em>状态：</em>{{ getOffLineStatus(orderDetails.payOffLine.status) }}</div>
                <div v-if="orderDetails.payOffLine.status == '2'">
                  <em>拒绝原因：</em>{{ orderDetails.payOffLine.admin_remark }}
                </div>
                <div><em>转账备注：</em>{{ orderDetails.payOffLine.desc }}</div>
                <div v-if="orderDetails.payOffLine.pic_list">
                  <em>转账截图：</em>
                  {{ getImages(orderDetails.payOffLine.pic_list) }}
                
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div v-else>暂无记录</div>
      </a-card> -->

      <a-card
        v-if="orderDetails && orderDetails.rmList && orderDetails.rmList.length"
        :bordered="false"
        style="margin-top: 10px"
        title="退款记录"
      >
        <a-table :columns="rmList" :data-source="orderDetails.rmList" :pagination="false">
          <a slot="refund_price" slot-scope="text">￥{{ text }}</a>
          <a slot="status" slot-scope="text">{{ text.status === '1' ? '成功' : '失败' }}</a>
        </a-table>
      </a-card>

      <a-card v-if="orderDetails" :bordered="false" style="margin-top: 10px" title="其他信息">
        <template v-if="!yinbao">
          <a-button slot="extra" v-if="orderDetails.md_id == 0 || orderDetails.is_trans == 1" @click="orderRemark()"
            >添加备注</a-button
          >
        </template>
        <a-descriptions size="small" :column="1">
          <a-descriptions-item label="卖家备注">
            {{ orderDetails.seller_comments || '无' }}
          </a-descriptions-item>
        </a-descriptions>

        <a-card
          title="表单信息"
          :headStyle="headStyle"
          :bodyStyle="bodyStyle"
          v-if="hasGoodsForm"
          style="width: 100%; margin-top: 18px"
        >
          <template v-for="(item, index) of orderDetails.goods_list">
            <div v-if="item.form.length && item.form.every((el) => el.value)" class="goodsItem">
              <p>{{ item.name }}</p>

              <a-descriptions size="small" :key="index">
                <a-descriptions-item v-if="cItem.value" :label="cItem.key" v-for="cItem of item.form" :key="cItem.id">
                  <a-popover v-if="cItem.type === 'uploadImg'" title="" trigger="hover" placement="top">
                    <a-button type="primary"> 查看图片 </a-button>
                    <template slot="content">
                      <img style="height: 200px" :src="cItem.value" alt="" />
                    </template>
                  </a-popover>
                  <span v-else>
                    {{ cItem.value }}
                  </span>
                </a-descriptions-item>
              </a-descriptions>
            </div>
          </template>
        </a-card>

        <a-card
          v-if="orderDetails.verify_card && orderDetails.verify_card.length"
          title="赠送卡卷"
          :headStyle="headStyle"
          style="width: 100%; margin-top: 18px"
        >
          <template v-for="(item, index) of orderDetails.verify_card">
            <p>{{ item.name }}</p>
            <a-descriptions size="small" :key="index">
              <a-descriptions-item label="卡券类型">{{ getCardType(item.type) }}</a-descriptions-item>
              <a-descriptions-item label="卡券账户">{{ item.account }}</a-descriptions-item>
              <a-descriptions-item label="卡券密码">{{ item.password }}</a-descriptions-item>
            </a-descriptions>
          </template>
        </a-card>
      </a-card>

      <!-- <a-card
        v-if="orderDetails && orderDetails.is_offline == 1"
        :bordered="false"
        style="margin-top: 10px"
        title="门店信息"
      >
        <a-row v-if="orderDetails.shop">
          <a-col span="8"> 门店名称：{{ orderDetails.shop.name }} </a-col>
          <a-col span="8"> 门店地址：{{ orderDetails.shop.address }} </a-col>
          <a-col span="8"> 联系电话：{{ orderDetails.shop.mobile }} </a-col>
        </a-row>
      </a-card> -->

      <a-card v-if="orderDetails" :bordered="false" style="margin-top: 10px" title="商品信息">
        <!-- <TableCom
          :tableTh="columns"
          :listData="orderDetails.goods_list"
          :orderDetails="orderDetails"
          @tableOperate="tableOperate"
        ></TableCom> -->

        <a-table
          :columns="columns"
          :data-source="orderDetails.goods_list"
          :pagination="false"
          :rowKey="
            (r, i) => {
              return i
            }
          "
        >
          <div slot="name" slot-scope="scope" class="goodsName">
            <img :src="scope.pic" style="width: 48px; height: 48px; min-width: 48px; border-radius: 4px" />
            <div style="margin-left: 24px; flex: auto; width: 0">
              <a-tooltip>
                <template slot="title">
                  {{ scope.name }}
                </template>
                <h4 class="over_e fw_b">{{ scope.name }}</h4>
              </a-tooltip>
              <a-tooltip>
                <template slot="title">
                  {{ scope.attr_list ? scope.attr_list.map((e) => e.attr_name).join() || '默认' : '默认' }}
                </template>
                <div class="over_e" style="font-size: 14px">
                  规格：{{ scope.attr_list ? scope.attr_list.map((e) => e.attr_name).join() || '默认' : '默认' }}
                </div>
              </a-tooltip>
              <a-tooltip v-if="scope.food_ext_goods && scope.food_ext_goods.length">
                <template slot="title">
                  {{ scope.food_ext_goods ? scope.food_ext_goods.map((e) => e.name + 'x' + e.num).join() : '' }}
                </template>
                <div class="over_e" style="font-size: 14px">
                  加料：{{ scope.food_ext_goods ? scope.food_ext_goods.map((e) => e.name + 'x' + e.num).join() : '' }}
                </div>
              </a-tooltip>
            </div>
          </div>
          <span slot="price" slot-scope="scope"> ￥{{ scope.total_price / scope.num }} </span>
          <span slot="total_price" slot-scope="text"> ￥{{ text }} </span>
        </a-table>

        <div class="prices">
          <div class="item">
            <span class="label">总计:</span>
            <span class="count">{{ orderDetails.total_price }}</span>
          </div>
          <div class="item">
            <span class="label">积分抵扣:</span>
            <span class="count">-{{ orderDetails.integral_price }}</span>
          </div>
          <div class="item">
            <span class="label">累计优惠:</span>
            <span class="count">{{ orderDetails.coupon_sub_price }}</span>
          </div>
          <div class="item" v-if="orderDetails.alipay_activity_voucher">
            <span class="label">支付券({{ orderDetails.alipay_activity_voucher.name }}):</span>
            <span class="count">{{ getActivityCount(orderDetails.alipay_activity_voucher) }}</span>
          </div>
          <div class="item">
            <span class="label">实付款:</span>
            <span class="count">
              {{ orderDetails.pay_price }}
              <template v-if="orderDetails.alipay_activity_voucher">(含支付券)</template>
            </span>
          </div>
        </div>
      </a-card>
    </div>
    <SendModal
      v-if="orderDetails"
      :visible.sync="isShowSendModal"
      :expressList="express_list"
      :orderId="orderDetails.id"
      @onAfterClose="getOrderInfo"
    ></SendModal>
    <OrderPrintModal :visible.sync="isShowPrintModal" :order="orderDetails"></OrderPrintModal>
    <ExpressModal
      v-if="isShowExpressModal"
      :visible.sync="isShowExpressModal"
      :orderId="orderDetails.id"
    ></ExpressModal>

    <!-- 门店选择组件 -->
    <SearchShop v-model="showShop" @onOk="selectShop"></SearchShop>
    <!-- 修改地址组件 -->
    <AddressModal
      ref="addressModal"
      v-if="isShowAddressModal"
      :visible.sync="isShowAddressModal"
      :orderId="orderDetails.id"
      @onAfterClose="getOrderInfo"
      :order="orderDetails"
    ></AddressModal>
  </div>
</template>

<script>
// const userColumns = [
//   {
//     title: '标题',
//     dataIndex: 'key'
//   },
//   {
//     title: '内容',
//     dataIndex: 'value',
//     scopedSlots: { customRender: 'value' }
//   }
// ]

const columns = [
  {
    title: '商品信息',
    ellipsis: true,
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '单价',
    scopedSlots: { customRender: 'price' },
  },
  {
    title: '购买数量',
    dataIndex: 'num',
  },
  // {
  //   title: '自定义表单',
  //   dataIndex: 'form',
  //   scopedSlots: { customRender: 'form' }
  // },
  {
    title: '小计',
    dataIndex: 'total_price',
    scopedSlots: { customRender: 'total_price' },
  },
]
import { orderCancel, getOrderList, setComments, orderPrint, setWords, UpdateShop } from '@/api/order'
import { mchGetOrderList } from '@/api/mch_admin/order/order'
import SendModal from './components/SendModal'
import OrderPrintModal from './components/OrderPrint'
import ExpressModal from './components/ExpressModal'
import TableCom from './components/TableCom'
import { SearchShop } from '@/components'
import AddressModal from './components/AddressModal'
import { orderPospallist } from '@/api/yinbao'
import statusList from '@/views/marketing/serviceHome/order/statusList.json'
import { cyyUploadImg } from '@/components/CyyUi/index'

export default {
  components: {
    SendModal,
    OrderPrintModal,
    ExpressModal,
    TableCom,
    SearchShop,
    AddressModal,
    cyyUploadImg,
  },
  props: {},
  data() {
    return {
      statusList,
      rmList: [
        {
          title: 'id',
          dataIndex: 'id',
        },
        {
          title: '退款金额',
          dataIndex: 'refund_price',
          scopedSlots: { customRender: 'refund_price' },
        },
        {
          title: '退款状态',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '退款备注',
          dataIndex: 'desc',
          ellipsis: true,
        },
        {
          title: '退款时间',
          dataIndex: 'created_at',
        },
      ],

      columns,
      routes: [
        {
          path: 'order',
          breadcrumbName: '订单',
        },
        {
          path: '/list',
          breadcrumbName: '订单列表',
        },
        {
          path: 'second',
          breadcrumbName: '订单详情',
        },
      ],
      routes2: [
        {
          path: 'order',
          breadcrumbName: '订单',
        },
        {
          path: '/offline-list',
          breadcrumbName: '自提订单',
        },
        {
          path: 'second',
          breadcrumbName: '订单详情',
        },
      ],
      reason: '',
      express_list: [],
      isShowSendModal: false,
      remark: '',
      orderDetails: null,
      isShowPrintModal: false,
      isShowExpressModal: false,
      isShowAddressModal: false, // 展示修改地址组件
      showShop: false, // 展示门店选择组件
      currentGood: {}, // 当前点击的商品
      headStyle: {
        padding: '0 24px',
        background: '#E9E9E9',
        color: '#000',
        fontSize: '14px',
      },

      bodyStyle: {
        padding: '5px 24px',
      },

      yinbao: false,
    }
  },
  computed: {
    getImages() {
      return (list) => {
        return JSON.parse(list).map((el) => {
          return { url: el }
        })
      }
    },

    getOffLineStatus() {
      return (status) => {
        let str = ''
        switch (String(status)) {
          case '0':
            str = '待审核'
            break

          case '1':
            str = '已通过'
            break

          case '2':
            str = '已拒绝'
            break
        }

        return str
      }
    },

    statusCurrent() {
      if (this.$route.query.order_type == 6) {
        let i = -1
        for (const key in this.statusList) {
          if (key == this.orderDetails.woe.status_ext) {
            return i + 1
          } else {
            i++
          }
        }
      }
      return 0
    },
    getActivityCount() {
      return (item) => {
        if (item.discount_type === 1) {
          return item.discount + '折'
        } else {
          return item.sub_price || '0.00'
        }
      }
    },

    getCardType() {
      return (type) => {
        let str = '核销卡'

        switch (type) {
          case '2':
            str = '礼品卡'
            break

          case '3':
            str = '储值卡'
            break

          case '4':
            str = '卡密卡'
            break

          case '5':
            str = '视频卡'
            break
        }

        return str
      }
    },

    hasGoodsForm() {
      return this.orderDetails.goods_list.some((el) => el.form && el.form.length != 0)
    },

    order_id() {
      if (this.$route.query.order_id) {
        return JSON.parse(this.$route.query.order_id)
      } else {
        return {}
      }
    },
    isOffline() {
      return this.$route.query.isOffline || false
    },
    orderStep() {
      if (this.orderDetails) {
        if (this.orderDetails.is_pay == 0 && this.orderDetails.pay_type != 2) {
          return 0
        }
        if (this.orderDetails.pay_type != 2) {
          if (this.orderDetails.is_pay == 1 && this.orderDetails.trade_status == 0) {
            return 1
          }
          if (this.orderDetails.is_pay == 1 && this.orderDetails.trade_status == 2) {
            return 2
          }
          if (this.orderDetails.is_pay == 1 && this.orderDetails.trade_status == 3) {
            return 3
          }
        } else {
          if (this.orderDetails.trade_status == 0) {
            return 1
          }
          if (this.orderDetails.trade_status == 2) {
            return 2
          }
          if (this.orderDetails.is_pay == 1 && this.orderDetails.trade_status == 3) {
            return 3
          }
        }
      } else {
        return 0
      }
    },
    orderSend() {
      this.isShowSendModal = true
    },
  },
  watch: {},
  created() {
    this.getOrderInfo()
  },
  mounted() {},
  updated() {},
  methods: {
    getOrderInfo() {
      const hide = this.$message.loading('正在获取数据,请稍等...', 0)

      if (this.$route.query.isMch) {
        mchGetOrderList({
          order_id: this.order_id,
        })
          .then((res) => {
            hide()
            if (res.code === 0) {
              this.express_list = res.data.express_list
              if (res.data.data && res.data.data[0] && res.data.data[0].book_info) {
                res.data.data[0].book_info = JSON.parse(res.data.data[0].book_info)
              }
              this.orderDetails = res.data.data[0]
            } else {
              that.$message.error(res.msg)
            }
            this.spinning = false
          })
          .catch(() => {
            hide()
          })
        return
      } else if (this.$route.query.isYinbao) {
        this.yinbao = true
        orderPospallist({
          order_id: this.order_id,
        })
          .then((res) => {
            hide()

            if (res.code === 0) {
              this.express_list = res.data.express_list
              if (res.data.data && res.data.data[0] && res.data.data[0].book_info) {
                res.data.data[0].book_info = JSON.parse(res.data.data[0].book_info)
              }
              this.orderDetails = res.data.data[0]
            } else {
              that.$message.error(res.msg)
            }
            this.spinning = false
          })
          .catch(() => {
            hide()
          })

        return
      }

      getOrderList({
        order_id: this.order_id,
        order_origin: this.$route.query.order_origin || '',
        order_type: this.$route.query.order_type || '',
      })
        .then((res) => {
          hide()

          if (res.code === 0) {
            this.express_list = res.data.express_list
            if (res.data.data && res.data.data[0] && res.data.data[0].book_info) {
              res.data.data[0].book_info = JSON.parse(res.data.data[0].book_info)
            }
            this.orderDetails = res.data.data[0]
          } else {
            that.$message.error(res.msg)
          }
          this.spinning = false
        })
        .catch(() => {
          hide()
        })
    },
    cancel(status, type) {
      var params = {
        type: type,
        status: status,
        remark: this.reason,
        id: this.orderDetails.id,
      }
      const hide = this.$message.loading('取消中...', 0)
      orderCancel(params)
        .then((res) => {
          console.log(res)
          hide()
          if (res.code !== 0) {
            this.$error({
              content: res.msg,
            })
          } else {
            this.$message.success('取消订单成功')
          }
          this.$nextTick(() => {
            this.$refs['addressModal'].reason = ''
          })
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    orderRemark() {
      const h = this.$createElement
      this.$confirm({
        icon: '<>',
        closable: true,
        width: 540,
        title: '添加备注信息',
        maskClosable: true,
        content: h('div', {}, [
          h('a-textarea', {
            props: {
              placeholder: '填写备注',
              autoSize: { minRows: 4, maxRows: 6 },
            },
            on: {
              change: (val) => {
                this.remark = val.target.value
              },
            },
          }),
        ]),
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          const hide = this.$message.loading('取消中...', 0)
          setComments({
            order_id: this.orderDetails.id,
            seller_comments: this.remark,
          }).then((res) => {
            hide()
            this.getOrderInfo()
            if (res.code !== 0) {
              this.$error({
                content: res.msg,
              })
            } else {
              this.$message.success(res.msg)
            }
          })
        },
      })
    },
    orderWords() {
      const h = this.$createElement
      this.$confirm({
        icon: '<>',
        closable: true,
        width: 540,
        title: '添加留言',
        maskClosable: true,
        content: h('div', {}, [
          h('a-textarea', {
            props: {
              placeholder: '填写留言',
              autoSize: { minRows: 4, maxRows: 6 },
            },
            on: {
              change: (val) => {
                this.remark = val.target.value
              },
            },
          }),
        ]),
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          const hide = this.$message.loading('提交中...', 0)
          setWords({
            order_id: this.orderDetails.id,
            words: this.remark,
          }).then((res) => {
            hide()
            this.getOrderInfo()
            if (res.code !== 0) {
              this.$error({
                content: res.msg,
              })
            } else {
              this.$message.success(res.msg)
            }
          })
        },
      })
    },
    orderPrint() {
      const hide = this.$message.loading('提交中...', 0)
      orderPrint({
        order_id: this.orderDetails.id,
      }).then((res) => {
        hide()
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.$message.success(res.msg)
        }
      })
    },

    // 表单操作回调
    tableOperate(name, data) {
      console.log(arguments, name, data)
      switch (name) {
        case 'update_shop': // 选择门店
          this.showShop = true
          break
        case 'order_address': // 修改地址
          this.isShowAddressModal = true
          break
        default:
          break
      }
    },

    // 选择门店组件确认回调事件
    selectShop(res) {
      var shop = res[0]
      const hide = this.$message.loading('提交中...', 0)
      UpdateShop({
        shop_id: shop.id,
        order_id: this.orderDetails.id,
      }).then((res) => {
        hide()
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.getOrderInfo()
          this.$message.success(res.msg)
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
tr:last-child td {
  padding-bottom: 0;
}
.content {
  display: flex;
}
.ant-statistic-content {
  font-size: 20px;
  line-height: 28px;
}
@media (max-width: 576px) {
  .content {
    display: block;
  }
  .main {
    width: 100%;
    margin-bottom: 12px;
  }
  .extra {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }
}
.over_e {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fw_b {
  font-weight: bold;
}
.goodsName {
  display: flex;
  align-items: center;
}
.prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 20px;
  .item {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin: 2px 0;
    color: #000;
    .count {
      min-width: 100px;
      text-align: right;
      opacity: 0.65;
    }
    .label {
      opacity: 0.85;
    }
  }
}

.goodsItem {
  padding: 10px 0;
  border-bottom: 1px solid #e9e9e9;

  &:last-of-type {
    border-bottom: 0;
  }
}

.list-table {
  border: 1px solid #e9e9e9;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.85);

  .tit {
    padding: 0 24px;
    font-size: 16px;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #e9e9e9;
  }

  ul {
    padding: 5px 25px 0;
  }

  li {
    padding: 14px 0;
    font-size: 14px;
    border-bottom: 1px solid #e9e9e9;
    color: rgba(0, 0, 0, 0.65);

    &:last-of-type {
      border-bottom: 0;
    }

    em {
      font-style: normal;
      color: rgba(0, 0, 0, 0.85);
    }

    .con {
      display: flex;

      div {
        overflow: hidden;
        width: 33.33%;
        padding: 0;
      }
    }
  }
}

// .skeleton {
//   height: calc(100vh - 48px);
//   background: #fff;
// }
</style>
